<!--
 * @Author: itw_caijm
 * @Date: 2025-03-13 00:08:39
 * @LastEditors: itw_caijm
 * @LastEditTime: 2025-03-13 01:17:19
 * @Description: 
 * @FilePath: /threejs/src/views/home/index.vue
-->
<template>
  <div class="home-container">
    <div
      class="container"
      ref="containerRef"
    ></div>
  </div>
</template>
<script setup>
import * as THREE from "three"
import { OrbitControls, GLTFExporter } from "three/examples/jsm/Addons.js"
const containerRef = ref(null)
onMounted(() => {
  // 1、创建一个三维场景
  const scene = new THREE.Scene()
  const box = document.querySelector(".container")

  // 2、给三维场景添加物体
  // 2-1、定义物体的形状
  const geometry = new THREE.BoxGeometry(100, 100, 100)
  // 2-2、定义物体的材质
  const material = new THREE.MeshBasicMaterial({ color: 0x23ff01 })
  // 2-3、创建一个网格模型
  const mesh = new THREE.Mesh(geometry, material)
  // 2-5、定义网格模型的位置
  mesh.position.set(0, 10, 0)
  // 2-4、将网格模型添加到三维场景中
  scene.add(mesh)

  // 3、创建一个相机（透视相机）
  const camera = new THREE.PerspectiveCamera(75, box.clientWidth / box.clientHeight, 0.1, 1000)
  // const camera = new THREE.PerspectiveCamera()
  // 3-1、定义相机的位置
  camera.position.set(200, 200, 100)
  // 3-2、相机的视线、观察目标点的坐标
  // camera.lookAt(0, 0, 0)
  // 相机也可以指向一个物体
  camera.lookAt(mesh.position) // 相机指向网格模型

  // 4、创建一个渲染器
  const renderer = new THREE.WebGLRenderer()
  // 4-1、定义渲染器的大小
  renderer.setSize(box.clientWidth, box.clientHeight)
  // 4-2、渲染器渲染： 用那个相机对那个场景进行拍照
  renderer.render(scene, camera)
  // 5、将渲染器渲染的内容添加到页面中
  box.appendChild(renderer.domElement)
  // 5、渲染场景
  function render() {
    renderer.render(scene, camera)
    requestAnimationFrame(render)
  }
})
</script>

<style scoped>
.container {
  border: 1px solid #000;
  width: 100%;
  height: var(--main-container-height);
}
</style>
